<template>
  <div class="keyboard">
    <!-- 自定义输入框 stop:阻止事件继续传播-->
    <div class="input-box" @touchstart.stop="focus">
      <!-- 左侧标签 -->
      <!-- <p class="label">{{label}}</p> -->
      <!-- 右侧内容 -->
      <div class="content">
        <p class="input">
          ¥<span class="currency" v-show="val"></span>
          {{val}}
          <!-- 闪烁的光标 -->
          <span class="cursor" :style="{visibility: cursor ? 'visible' : 'hidden'}"></span>
        </p>
      </div>
    </div>
    <!-- 自定义键盘 -->
    <kbRmb :show="keyboard" @typing="typing" @complete="blur"></kbRmb>
  </div>
</template>

<script>
  import kbRmb from './kbRmb'
  export default {
    data() {
      return {
        cursor: true,
        keyboard: true,  // 默认显示键盘
        /*value 在组件中的值*/
        val: '', 
        aIllegal: ['00', '01' ,'02','03','04','05','06','07','08','09', '0..', '.'],
        cursorDuration: 600,
        bodyHeight: '',
        bodyOverflow: ''
      }
    },
    components: {
      kbRmb
    },
    created() {
      // document.addEventListener('touchstart', () => {
      //   this.blur();
      // });
      document.body.addEventListener('touchstart', this.blur, false);
    },
    mounted() {
      // this.focus();
    },
    props: {
      value: '',
      inter: {
        default: 5
      },
      decimal: {
        default: 2
      },
      placeholder: {
        default: '金额(元)'
      }
    },
    methods: {
      focus() {
        console.log("focus");
        /*显示键盘*/
        this.showKeyboard();
        /*显示光标*/
        this.showCursor();
        /*闪烁光标*/
        this.blinkCursor();
      },
      blinkCursor() {
        clearInterval(this.intervalID);
        this.intervalID = setInterval(()=>{
          this.cursor = !this.cursor;
        }, this.cursorDuration);
      },
      unblinkCursor() {
        clearInterval(this.intervalID);
      },
      blur() {
        console.log("blur");
        /*隐藏光标*/
        this.hideCursor();
        /*停止光标闪烁*/
        this.unblinkCursor();
        /*隐藏键盘*/
        this.hideKeyboard();
        /*
          附加 00, 如果用户输入了一个以 . 结尾的值就点完成了, 
          那么这个时候就在后面加上00
        */
        this.toCompletion();
        /*通知父组件, 老子值出来了*/
        /*
          校验用户输入的金额是不是为 0, 如果是的话, 直接重置
        */
        this.checkValue();
        this.notify();
      },
      showKeyboard() {
        this.keyboard = true;
      },
      hideKeyboard() {
        this.keyboard = false;
      },
      showCursor() {
        this.cursor = true;
      },
      hideCursor () {
        this.cursor = false;
      },
      checkValue () {
        if (parseFloat(this.val) === 0) {
          this.val = '';
        }
      },
      toCompletion() {   // 判读是否需要加0
        console.log("this.value:", this.value);
        let list = this.value.split('.');
        console.log("list:", list);
        if (typeof list[1] === 'undefined') {
          if (this.val !== '') {
            this.val = this.val + '.';
            this.completion(this.decimal);
          }
        } else {
          if (list[1].length < this.decimal) {
            this.completion(this.decimal - list[1].length);
          }
        }
        // add by alfred.fu 解除事件监听
        document.body.removeEventListener('touchstart', this.blur, false);
      },
      completion (len) {
        let v = '';
        for(let i =0;i<len;i++){
          v = v + '0';
        }
        this.val = this.val + v;
      },
      notify () {
        this.$emit('input',this.val);
      },
      del () {
        /*删除值并不会触发值的校验, 所以需要手动再触发一次*/
        this.val = this.val.slice(0, -1);
        this.notify();
      },
      /*输入*/
      typing (value) {
        /*如果是点击删除*/
        if (value === '') {
          this.del();
        }
        /*保存旧的值*/
        let oldValue = this.val;
        /*获取新的值*/
        this.val = this.val + value;
        /*检验新值, 如果没有通过检测, 恢复值*/
        if (!this.passCheck(this.val)) {
          this.val = oldValue;
          return;
        }
        /*为了让外界同步输入, 需要发送事件*/
        this.notify();
      },
      passCheck (val) {
        /*验证规则*/
        let aRules = [
            this.illegalInput,
            this.illegalValue,
            this.accuracy
          ]
        return aRules.every((item) => {
          return item(val);
        });
      },
      illegalInput (val) {
        if (this.aIllegal.indexOf(val) > -1) {
          return false;
        }
        return true;
      },
      /*非法值*/
      illegalValue (val) {
        if (parseFloat(val) != val) {
          return false;
        } 
        return true;      
      },
      /*验证精度*/
      accuracy (val) {
        let v = val.split('.')
        if (v[0].length > this.inter) {
          return false;
        }
        if (v[1] && (v[1].length) > this.decimal) {
          return false;         
        }
        return true;        
      } 
    }
  }
</script>

<style scoped lang="scss">
  @import 'src/style/mixin';
  .cursor {
    margin-left: -0.3rem;
    height:1rem;
    width:1rem;
    border-left:0.1rem #000 solid;
  }
</style>
